<template>
  <div class="">
    <el-table border v-loading="loading" :data="dataList">
      <el-table-column
        prop="year"
        label="年份"
        align="center"
        width="80"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        label="单位面积综合能耗"
        align="center"
        show-overflow-tooltip
      >
        <el-table-column
          prop="areaUnitEnergy"
          label="能耗(kgce/m²)"
          align="center"
          min-width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.areaUnitEnergy | numDealfilters }}
          </template>
        </el-table-column>
        <el-table-column
          prop="areaUnitEnergyYearOverYear"
          label="同比(%)"
          min-width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="!scope.row.areaUnitEnergyYearOverYear">0</div>
            <div v-if="scope.row.areaUnitEnergyYearOverYear > 0" class="red">
              +
              {{
                ((scope.row.areaUnitEnergyYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
            <div v-if="scope.row.areaUnitEnergyYearOverYear < 0" class="green">
              {{
                ((scope.row.areaUnitEnergyYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="areaUnitEnergyRangePercent"
          label="下降目标(%)"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              ((scope.row.areaUnitEnergyRangePercent * 10000) / 100)
                | numDealfilters
            }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="areaUnitEnergyIsReachStandard"
          label="达标情况"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table-column>

      <el-table-column
        label="人均综合能耗"
        align="center"
        show-overflow-tooltip
      >
        <el-table-column
          prop="personalEnergy"
          label="能耗(kgce/p)"
          align="center"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.personalEnergy | numDealfilters }}
          </template>
        </el-table-column>
        <el-table-column
          prop="personalEnergyYearOverYear"
          label="同比(%)"
          min-width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="!scope.row.personalEnergyYearOverYear">0</div>
            <div v-if="scope.row.personalEnergyYearOverYear > 0" class="red">
              +
              {{
                ((scope.row.personalEnergyYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
            <div v-if="scope.row.personalEnergyYearOverYear < 0" class="green">
              {{
                ((scope.row.personalEnergyYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="personalEnergyRangePercent"
          label="下降目标(%)"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              ((scope.row.personalEnergyRangePercent * 10000) / 100)
                | numDealfilters
            }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="personalEnergyIsReachStandard"
          label="达标情况"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table-column>

      <el-table-column label="人均水耗" align="center" show-overflow-tooltip>
        <el-table-column
          prop="personalWater"
          label="能耗(t/p)"
          align="center"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.personalWater | numDealfilters }}
          </template>
        </el-table-column>
        <el-table-column
          prop="personalWaterYearOverYear"
          label="同比(%)"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="!scope.row.personalWaterYearOverYear">0</div>
            <div v-if="scope.row.personalWaterYearOverYear > 0" class="red">
              +
              {{
                ((scope.row.personalWaterYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
            <div v-if="scope.row.personalWaterYearOverYear < 0" class="green">
              {{
                ((scope.row.personalWaterYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="personalWaterRangePercent"
          label="下降目标(%)"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              ((scope.row.personalWaterRangePercent * 10000) / 100)
                | numDealfilters
            }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="personalWaterIsReachStandard"
          label="达标情况"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table-column>

      <el-table-column label="碳排总量" align="center" show-overflow-tooltip>
        <el-table-column
          prop="personalDc"
          label="碳排(kgCO2)"
          align="center"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.personalDc | numDealfilters }}
          </template>
        </el-table-column>
        <el-table-column
          prop="personalDcYearOverYear"
          label="同比(%)"
          min-width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="!scope.row.personalDcYearOverYear">0</div>
            <div v-if="scope.row.personalDcYearOverYear > 0" class="red">
              +
              {{
                ((scope.row.personalDcYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
            <div v-if="scope.row.personalDcYearOverYear < 0" class="green">
              {{
                ((scope.row.personalDcYearOverYear * 10000) / 100)
                  | numDealfilters
              }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="personalDcRangePercent"
          label="下降目标(%)"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              ((scope.row.personalDcRangePercent * 10000) / 100)
                | numDealfilters
            }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="personalDcIsReachStandard"
          label="达标情况"
          align="center"
          min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getYearlist } from "@/api/general/index.js";
import { dealElectricity } from "@/utils";
export default {
  filters: {
    numDealfilters(num) {
      if (null != num) {
        return dealElectricity(num, 1, 2);
      } else {
        return "";
      }
    },
  },
  components: {},
  props: {
    year: {
      type: [String, Number],
      default: 2024,
    },
  },
  data() {
    return {
      dataList: [],
      loading: false,
    };
  },
  created() {},
  mounted() {},
  watch: {
    year: {
      handler(val) {
        if (val) {
          this.requestYearlist();
        }
      },
      deep: false,
      immediate: true,
    },
  },
  methods: {
    // 年度统计
    requestYearlist() {
      this.loading = true;
      let query = {
        yearBefore: this.year,
        pageNum: 1,
        pageSize: 3,
      };
      query.deptIds = [this.$store.state.user.deptId];
      getYearlist(query)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "tabledata");
          this.dataList = res?.data ?? [];
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
